<template>
  <div>
    <app-header></app-header>
    <app-navbar></app-navbar>
    <app-main></app-main>
  </div>
</template>
<script>
import AppHeader from './AppHeader' // import AppHeader from './AppHeader/index.vue'（会导入“./AppHeader”下面的“index.vue”组件）
import AppNavbar from './AppNavbar' // import AppNavbar from './AppNavbar/index.vue'（会导入“./AppNavbar”下面的“index.vue”组件）
import AppMain from './AppMain' // import AppMain from './AppMain/index.vue'（会导入“./AppMain”下面的“index.vue”组件）
export default {
    components:{AppHeader,AppNavbar,AppMain}
}
</script>

<style scoped>
    .header{
        position: absolute;
        line-height: 60px;
        top: 0px;
        left: 0px;
        right: 0px;
        /* background-color: #2d3a4b; */
    }
    .navbar{
        position: absolute;
        padding: 15px;
        width: 165px;
        top: 60px;
        left: 0px;
        bottom: 0px;
        overflow-y: auto;
        /* background-color: #545c64; */
        /* text-align: center; */
        color: rgb(58, 182, 255);
    }
    .main{
        position: absolute;
        top: 60px;
        left: 195px;
        right: 0px;
        bottom: 0px;
        padding: 15px;
        overflow-y: auto;
        /* background-color: red; */
        color: rgb(58, 182, 255);
    }
</style>